import { Suspense, lazy } from 'react';
import { Outlet } from 'react-router-dom';

import { CircleLoading } from '@/components/Loading';
import CommonLayout from '@/layouts/common';

export default [
  {
    element: (
      <CommonLayout>
        <Suspense fallback={<CircleLoading />}>
          <Outlet />
        </Suspense>
      </CommonLayout>
    ),
    children: [
      {
        path: '/index',
        Component: lazy(() => import('@/pages/index/index')),
      },
      {
        path: '/goods',
        Component: lazy(() => import('@/pages/goods/index')),
      },
      {
        path: '/article/:id',
        Component: lazy(() => import('@/pages/article/index')),
      },
      {
        path: '/callback',
        Component: lazy(() => import('@/pages/callback/index')),
      },
      {
        path: '/goods/:id',
        Component: lazy(() => import('@/pages/goods/detail')),
      },
      {
        path: '/goods/detail/:id',
        Component: lazy(() => import('@/pages/goods/index')),
      },
      {
        path: '/editor/:id?',
        Component: lazy(() => import('@/pages/editor/Editor')),
      },
      {
        path: '/scene',
        Component: lazy(() => import('@/pages/scene/index')),
      },
      {
        path: '/editor',
        Component: lazy(() => import('@/pages/editor/Editor')),
      },
      {
        path: '/product',
        Component: lazy(() => import('@/pages/product/index')),
      },
      {
        path: '/product/:id',
        Component: lazy(() => import('@/pages/product/detail')),
      },
      {
        path: '/create',
        Component: lazy(() => import('@/pages/create/index')),
      },
      {
        path: '/gift',
        Component: lazy(() => import('@/pages/gift/index')),
      },
      {
        path: '/enterprise',
        Component: lazy(() => import('@/pages/enterprise/index')),
      },
      {
        path: '/group',
        Component: lazy(() => import('@/pages/group/index')),
      },
    ],
  },
];
